<template>
	<view class="page">
		<!-- 头部导航 -->
		<view class="header-bag">
			<image src="../../static/icons/icon-Get-into@3.png" class="back" @click="goBack"></image>
			<view class="header-center">
				<text>订单详情</text>
				<view class="kefu" @click="showCustomerService">客服</view>
			</view>
		</view>

		<view class="wrapper">
			<!-- 商品信息 -->
			<view class="goods-info">
				<!-- 订单标题 -->
				<view class="goods-info-title" v-html="orderTitleHtml"></view>
				
				<!-- 付款倒计时 -->
				<view v-if="orderInfo.state == 0" class="payment-section">
					<view class="tf dpay-time">
						<text>支付剩余时间:</text>
						<text class="time-text">{{ timeDisplay.hour }}时</text>
						<text class="time-text">{{ timeDisplay.minute }}分</text>
						<text class="time-text">{{ timeDisplay.second }}秒</text>
					</view>
					<view class="goods-info-pay">
						<view class="tf topay" @click="showPaymentMethods">付款</view>
					</view>
				</view>
			</view>

			<!-- 条码信息 -->
			<view class="tiaoma" v-if="orderInfo.state != 0">
				<view class="code-list">
					<view v-for="(code, index) in orderInfo.code" :key="index" class="code-item" :class="getCodeClass(code.state)">
						<text>消费码: {{ code.group_code }}</text>
						<text class="code-status">{{ getCodeStatus(code.state) }}</text>
						<image 
							v-if="code.state == 0" 
							src="../../static/img/o2o/txm_hei@2x.png" 
							class="code-img"
							@click="showBarcode(code.group_code)"
						></image>
						<image 
							v-else 
							src="../../static/img/o2o/txm_hui@2x.png" 
							class="code-img"
						></image>
					</view>
				</view>
			</view>

			<!-- 商家信息 -->
			<view class="store-info" v-if="storeInfo">
				<text class="hea">适用商户</text>
				<view class="store-detail">
					<view class="store-left">
						<text class="store-name">{{ storeInfo.name }}</text>
						<text class="store-address">{{ storeInfo.address }}</text>
					</view>
					<view class="store-right" @click="callPhone(storeInfo.tel)">
						<image src="../../static/img/o2o/dianhua@2x.png"></image>
					</view>
				</view>
			</view>

			<!-- 团单内容 -->
			<view class="group-info" v-if="groupInfo">
				<text class="hea">项目说明</text>
				<view class="group-content">
					<text>{{ groupInfo.explain }}</text>
				</view>
				<view class="tuwen" @click="viewImageText">
					<text>查看图文详情</text>
					<image src="../../static/img/o2o/twxq@2x.png"></image>
				</view>
			</view>

			<!-- 购买须知 -->
			<view class="buy-info" v-if="buyNotice && buyNotice.length > 0">
				<text class="hea">购买须知</text>
				<view class="buy-entry">
					<view v-for="(notice, index) in buyNotice" :key="index" class="notice-item">
						<text class="notice-title">{{ notice.name }}</text>
						<text class="notice-content">{{ notice.value }}</text>
					</view>
				</view>
			</view>

			<!-- 评价按钮 -->
			<view v-if="orderInfo.state == 2" class="goods-info-pay comment-section">
				<view class="tf topa" @click="goToComment">去评价</view>
			</view>
		</view>

		<!-- 条码弹窗 -->
		<view v-if="showBarcodeModal" class="barcode-modal" @click="hideBarcodeModal">
			<view class="barcode-card" @click.stop>
				<canvas canvas-id="barcodeCanvas" class="barcode-canvas"></canvas>
				<text class="barcode-status">待使用</text>
				<text class="barcode-code">消费码: {{ currentBarcode }}</text>
			</view>
		</view>

		<!-- 支付方式弹窗 -->
		<view v-if="showPayModal" class="pay-modal" @click="hidePayModal">
			<view class="pay-content" @click.stop>
				<view class="pay-header">
					<text>确认付款</text>
					<view class="close-btn" @click="hidePayModal">×</view>
				</view>
				<view class="pay-amount">{{ orderInfo.pay_amount }}</view>
				<view class="pay-methods">
					<view class="pay-method" @click="showPayPassword('balance')">
						<text>账户余额</text>
						<text class="balance-amount">￥{{ userBalance }}</text>
					</view>
					<view class="pay-method" @click="wechatPay">
						<text>微信支付</text>
						<image src="../../static/img/icon-gengduo@2x.png"></image>
					</view>
					<view class="pay-method" @click="unionPay">
						<text>银联支付</text>
						<image src="../../static/img/icon-gengduo@2x.png"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付密码弹窗 -->
		<view v-if="showPasswordModal" class="password-modal">
			<view class="password-header">
				<image src="../../static/img/icon-Get-into@3.png" class="back" @click="hidePasswordModal"></image>
				<text>{{ passwordTitle }}</text>
			</view>
			<view class="password-content">
				<text class="password-tip">请输入支付密码</text>
				<input 
					type="password" 
					maxlength="6" 
					v-model="payPassword" 
					@input="onPasswordInput"
					class="password-input"
					focus
				/>
			</view>
		</view>

		<!-- 客服电话弹窗 -->
		<view v-if="showPhoneModal" class="phone-modal" @click="hidePhoneModal">
			<view class="phone-content" @click.stop>
				<view class="phone-list">
					<view v-for="(phone, index) in servicePhones" :key="index" class="phone-item" @click="callPhone(phone.phone)">
						<text>{{ phone.service }}：{{ phone.phone }}</text>
					</view>
				</view>
				<view class="phone-cancel" @click="hidePhoneModal">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
import { o2oApi, paymentApi, systemApi } from '@/api/index.js'
import { getToken } from '@/api/auth.js'

export default {
	data() {
		return {
			orderNum: '',
			orderInfo: {},
			storeInfo: null,
			groupInfo: null,
			buyNotice: [],
			servicePhones: [],
			userBalance: '0.00',
			
			// 倒计时相关
			timeDisplay: {
				hour: '00',
				minute: '00',
				second: '00'
			},
			countdownTimer: null,
			
			// 弹窗控制
			showBarcodeModal: false,
			showPayModal: false,
			showPasswordModal: false,
			showPhoneModal: false,
			
			// 条码相关
			currentBarcode: '',
			
			// 支付相关
			payPassword: '',
			payType: '',
			passwordTitle: '请输入支付密码',
			isSettingPassword: false,
			firstPassword: '',
			secondPassword: ''
		}
	},
	
	computed: {
		orderTitleHtml() {
			if (!this.orderInfo.order_num) return ''
			
			const statusText = this.getOrderStatusText(this.orderInfo.state)
			
			return `
				<div class="order-num clear">
					<div class="fl">订单编号：<span>${this.orderInfo.order_num}</span></div>
					<div class="fr fk-zht">${statusText}</div>
				</div>
				<div class="goodsinfo_top displayflexa">
					<div class="top_l clear">
						<img src="${this.groupInfo?.main_img || ''}" />
						<ul>
							<li class="title">${this.groupInfo?.title || ''}</li>
							<li class="datas">${this.orderInfo.time || ''}</li>
							<li class="num clear">
								<p class="fl">数量：<span>${this.orderInfo.num || 0}</span></p>
								<p class="fl">本单分润：<span class="ren">￥${this.orderInfo.user_rebate_total || '0.00'}</span></p>
							</li>
							<li class="clear price">总价：<span class="zj">¥${this.orderInfo.pay_amount || '0.00'}</span></li>
						</ul>
					</div>
				</div>
				<div class="goodsinfo_bot">
					<ul class="displayflexa">
						<li><img src="../../static/img/o2o/icon-yxxk.png" />随时退</li>
						<li><img src="../../static/img/o2o/icon-yxxk.png" />到期自动退</li>
						<li class="yishou"><img src="../../static/img/o2o/yishou@2x.png" alt="">已售${this.groupInfo?.sold_num || 0}</li>
					</ul>
				</div>
			`
		}
	},
	
	onLoad(options) {
		this.orderNum = options.order_num || ''
		if (this.orderNum) {
			this.loadOrderInfo()
			this.loadServicePhones()
			this.loadUserBalance()
		}
	},
	
	onUnload() {
		if (this.countdownTimer) {
			clearInterval(this.countdownTimer)
		}
	},
	
	methods: {
		// 加载订单信息
		async loadOrderInfo() {
			try {
				const longitude = uni.getStorageSync('lng') || 0
				const latitude = uni.getStorageSync('lat') || 0
				
				const res = await o2oApi.getGroupOrderInfo({
					order_num: this.orderNum,
					longitude,
					latitude
				})
				
				if (res.r === 0) {
					this.orderInfo = res.data.order
					this.storeInfo = res.data.group.merch_info
					this.groupInfo = res.data.group
					this.buyNotice = res.data.group.notice || []
					
					// 如果是待付款状态，启动倒计时
					if (this.orderInfo.state === 0 && this.orderInfo.sy_time) {
						this.startCountdown(this.orderInfo.sy_time)
					}
				} else {
					uni.showToast({
						title: res.msg || '获取订单信息失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载订单信息失败:', error)
				uni.showToast({
					title: '网络错误',
					icon: 'none'
				})
			}
		},
		
		// 加载客服电话
		async loadServicePhones() {
			try {
				const res = await systemApi.getServicePhone()
				if (res.r === 0) {
					this.servicePhones = res.data.list || []
				}
			} catch (error) {
				console.error('加载客服电话失败:', error)
			}
		},
		
		// 加载用户余额
		async loadUserBalance() {
			try {
				const res = await paymentApi.getUserBalance()
				if (res.r === 0) {
					this.userBalance = res.data.money || '0.00'
				}
			} catch (error) {
				console.error('加载用户余额失败:', error)
			}
		},
		
		// 启动倒计时
		startCountdown(endTime) {
			const updateTime = () => {
				const now = Math.floor(Date.now() / 1000)
				const diff = endTime - now
				
				if (diff <= 0) {
					this.timeDisplay = { hour: '00', minute: '00', second: '00' }
					if (this.countdownTimer) {
						clearInterval(this.countdownTimer)
					}
					return
				}
				
				const hours = Math.floor(diff / 3600)
				const minutes = Math.floor((diff % 3600) / 60)
				const seconds = diff % 60
				
				this.timeDisplay = {
					hour: hours.toString().padStart(2, '0'),
					minute: minutes.toString().padStart(2, '0'),
					second: seconds.toString().padStart(2, '0')
				}
			}
			
			updateTime()
			this.countdownTimer = setInterval(updateTime, 1000)
		},
		
		// 获取订单状态文本
		getOrderStatusText(state) {
			const statusMap = {
				0: '待付款',
				1: '已付款',
				2: '待评价',
				3: '已退款',
				4: '已完成',
				14: '已关闭'
			}
			return statusMap[state] || '未知状态'
		},
		
		// 获取消费码状态
		getCodeStatus(state) {
			const statusMap = {
				0: '未使用',
				1: '已使用',
				2: '已退款'
			}
			return statusMap[state] || '未知'
		},
		
		// 获取消费码样式类
		getCodeClass(state) {
			const classMap = {
				0: 'weishiyong',
				1: 'yishiyong',
				2: 'yizuofei'
			}
			return classMap[state] || ''
		},
		
		// 显示条码
		showBarcode(code) {
			this.currentBarcode = code
			this.showBarcodeModal = true
			this.$nextTick(() => {
				this.generateBarcode(code)
			})
		},
		
		// 生成条码
		generateBarcode(code) {
			// 使用uni-app的canvas API生成条码
			const ctx = uni.createCanvasContext('barcodeCanvas', this)
			
			// 简单的条码绘制逻辑（实际项目中可能需要更复杂的条码生成库）
			ctx.setFillStyle('#000000')
			ctx.setFont('14px Arial')
			ctx.fillText(code, 10, 80)
			
			// 绘制简单的条纹
			for (let i = 0; i < code.length; i++) {
				const x = i * 8 + 10
				ctx.fillRect(x, 10, 4, 50)
			}
			
			ctx.draw()
		},
		
		// 隐藏条码弹窗
		hideBarcodeModal() {
			this.showBarcodeModal = false
			this.currentBarcode = ''
		},
		
		// 显示支付方式
		showPaymentMethods() {
			this.showPayModal = true
		},
		
		// 隐藏支付弹窗
		hidePayModal() {
			this.showPayModal = false
		},
		
		// 显示支付密码输入
		async showPayPassword(type) {
			this.payType = type
			this.hidePayModal()
			
			try {
				const res = await paymentApi.checkPayPassword()
				if (res.r === 0) {
					this.isSettingPassword = res.data.is_set === 0
					this.passwordTitle = this.isSettingPassword ? '设置支付密码' : '请输入支付密码'
					this.showPasswordModal = true
				}
			} catch (error) {
				console.error('检查支付密码失败:', error)
			}
		},
		
		// 支付密码输入处理
		async onPasswordInput() {
			if (this.payPassword.length < 6) return
			
			if (!/^\d{6}$/.test(this.payPassword)) {
				uni.showToast({
					title: '支付密码由六位数字组成',
					icon: 'none'
				})
				this.payPassword = ''
				return
			}
			
			if (this.isSettingPassword) {
				await this.handleSetPassword()
			} else {
				await this.handleVerifyPassword()
			}
		},
		
		// 处理设置密码
		async handleSetPassword() {
			if (!this.firstPassword) {
				this.firstPassword = this.payPassword
				this.payPassword = ''
				this.passwordTitle = '请再次输入支付密码'
				return
			}
			
			this.secondPassword = this.payPassword
			
			if (this.firstPassword !== this.secondPassword) {
				uni.showToast({
					title: '两次密码输入不一致',
					icon: 'none'
				})
				this.secondPassword = ''
				this.payPassword = ''
				return
			}
			
			try {
				const res = await paymentApi.setPayPassword({
					pay_pwd: this.firstPassword,
					pay_confirm_pwd: this.secondPassword
				})
				
				if (res.r === 0) {
					uni.showToast({
						title: '支付密码设置成功',
						icon: 'success'
					})
					this.isSettingPassword = false
					this.passwordTitle = '请输入支付密码'
					this.firstPassword = ''
					this.secondPassword = ''
					this.payPassword = ''
				} else {
					uni.showToast({
						title: res.msg || '设置失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('设置支付密码失败:', error)
			}
		},
		
		// 处理验证密码
		async handleVerifyPassword() {
			try {
				const res = await paymentApi.verifyPayPassword({
					pay_pwd: this.payPassword
				})
				
				if (res.r === 0) {
					this.hidePasswordModal()
					await this.processBalancePay()
				} else {
					uni.showToast({
						title: res.msg || '密码错误',
						icon: 'none'
					})
					this.payPassword = ''
				}
			} catch (error) {
				console.error('验证支付密码失败:', error)
				this.payPassword = ''
			}
		},
		
		// 处理余额支付
		async processBalancePay() {
			try {
				const res = await paymentApi.balancePay({
					order_num: this.orderNum,
					type: 6,
					is_father_order: 2,
					num: this.orderInfo.num
				})
				
				if (res.r === 0) {
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.redirectTo({
							url: `/pages/o2o/order-pay-success?type=余额支付&TotalMoney=${this.orderInfo.pay_amount}&order_num=${this.orderNum}`
						})
					}, 1000)
				} else {
					uni.showToast({
						title: res.msg || '支付失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('余额支付失败:', error)
			}
		},
		
		// 微信支付
		async wechatPay() {
			this.hidePayModal()
			
			try {
				const openid = uni.getStorageSync('openid') || ''
				const res = await paymentApi.wechatPay({
					order_num: this.orderNum,
					source: 5,
					type: 6,
					is_father_order: 1,
					openid
				})
				
				if (res.r === 0) {
					// 调用微信支付
					this.callWechatPay(res.data)
				} else {
					uni.showToast({
						title: res.msg || '支付失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('微信支付失败:', error)
			}
		},
		
		// 调用微信支付
		callWechatPay(payData) {
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: payData.timeStamp.toString(),
				nonceStr: payData.nonceStr,
				package: payData.package,
				signType: payData.signType,
				paySign: payData.paySign,
				success: () => {
					uni.redirectTo({
						url: `/pages/o2o/order-pay-success?type=微信支付&TotalMoney=${this.orderInfo.pay_amount}&order_num=${this.orderNum}`
					})
				},
				fail: () => {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				}
			})
		},
		
		// 银联支付
		async unionPay() {
			this.hidePayModal()
			
			try {
				const res = await paymentApi.unionPay({
					order_num: this.orderNum,
					source: 2,
					type: 6,
					is_father_order: 2
				})
				
				if (res.r === 0) {
					// 处理银联支付跳转
					// 这里需要根据实际情况处理银联支付的跳转逻辑
					console.log('银联支付数据:', res.data)
				} else {
					uni.showToast({
						title: res.msg || '支付失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('银联支付失败:', error)
			}
		},
		
		// 隐藏支付密码弹窗
		hidePasswordModal() {
			this.showPasswordModal = false
			this.payPassword = ''
			this.firstPassword = ''
			this.secondPassword = ''
		},
		
		// 显示客服电话
		showCustomerService() {
			this.showPhoneModal = true
		},
		
		// 隐藏客服电话弹窗
		hidePhoneModal() {
			this.showPhoneModal = false
		},
		
		// 拨打电话
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			})
		},
		
		// 查看图文详情
		viewImageText() {
			if (this.groupInfo) {
				uni.navigateTo({
					url: `/pages/o2o/image-text-detail?group_id=${this.groupInfo.id}&store_id=${this.groupInfo.merch_id}`
				})
			}
		},
		
		// 去评价
		goToComment() {
			if (this.groupInfo) {
				uni.navigateTo({
					url: `/pages/o2o/group-comment?merch_id=${this.groupInfo.merch_id}&order_num=${this.orderNum}&group_id=${this.groupInfo.id}`
				})
			}
		},
		
		// 返回
		goBack() {
			const pages = getCurrentPages()
			if (pages.length > 1) {
				uni.navigateBack()
			} else {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	background-color: #EEEEEE;
	min-height: 100vh;
}

.header-bag {
	background-color: #FF1E00;
	height: 88rpx;
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30rpx;
	
	.back {
		width: 40rpx;
		height: 40rpx;
		z-index: 99;
	}
	
	.header-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: white;
		font-size: 36rpx;
		
		.kefu {
			position: absolute;
			font-size: 30rpx;
			right: -200rpx;
			top: 4rpx;
			color: #fffefe;
		}
	}
}

.wrapper {
	background-color: #EEEEEE;
	
	> view:not(:first-child) {
		background-color: white;
		margin-bottom: 20rpx;
	}
}

.goods-info {
	font-size: 26rpx;
	margin-bottom: 20rpx;
	background-color: white;
}

.goods-info-title {
	/deep/ .order-num {
		background: #fff;
		padding: 0 30rpx;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		
		.fk-zht {
			color: #ff1e00;
		}
	}
	
	/deep/ .goodsinfo_top {
		padding: 20rpx 30rpx;
		background-color: #fff;
		justify-content: space-between;
		border-bottom: 1px solid #ddd;
		
		.top_l {
			width: 100%;
			display: flex;
			
			img {
				display: block;
				width: 182rpx;
				height: 162rpx;
				border-radius: 4rpx;
				margin-right: 20rpx;
			}
			
			ul {
				flex: 1;
				color: #444444;
				
				li {
					margin-bottom: 10rpx;
					
					&.title {
						font-size: 30rpx;
						color: #212121;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-weight: 700;
					}
					
					&.datas {
						font-size: 26rpx;
						color: #626262;
					}
					
					&.num {
						font-size: 26rpx;
						color: #6e6e6e;
						display: flex;
						
						p {
							margin-right: 30rpx;
							
							.ren {
								color: #ff1e00;
							}
						}
					}
					
					&.price {
						font-size: 26rpx;
						color: #212121;
						
						.zj {
							color: #ff1e00;
						}
					}
				}
			}
		}
	}
	
	/deep/ .goodsinfo_bot {
		background-color: white;
		border-bottom: 1px solid #EEEEEE;
		
		ul {
			width: 100%;
			display: flex;
			justify-content: space-around;
			
			li {
				width: 50%;
				padding: 30rpx 0;
				text-align: center;
				color: #FF9600;
				font-size: 24rpx;
				
				&.yishou {
					color: #777777;
				}
				
				img {
					width: 22rpx;
					height: 22rpx;
					margin-right: 14rpx;
				}
			}
		}
	}
}

.payment-section {
	.dpay-time {
		padding: 40rpx 0 20rpx;
		text-align: center;
		font-size: 30rpx;
		
		.time-text {
			color: #ff1e00;
			margin: 0 10rpx;
		}
	}
	
	.goods-info-pay {
		padding: 0 30rpx 30rpx;
		
		.topay {
			width: 100%;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			border-radius: 10rpx;
			background-color: #FF1E00;
			color: white;
			font-size: 36rpx;
		}
	}
}

.tiaoma {
	font-size: 24rpx;
	background-color: white;
	
	.code-list {
		.code-item {
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #ddd;
			
			&:last-child {
				border-bottom: none;
			}
			
			.code-status {
				margin-left: 50rpx;
			}
			
			.code-img {
				width: 41rpx;
				height: 41rpx;
				margin-left: auto;
			}
			
			&.yishiyong {
				color: #888888;
			}
			
			&.weishiyong {
				color: #444;
				
				.code-status {
					color: #ff1e00;
				}
			}
			
			&.yizuofei {
				color: #888888;
				
				.code-status {
					color: #888;
				}
			}
		}
	}
}

.store-info {
	font-size: 28rpx;
	background-color: white;
	
	.hea {
		width: 100%;
		font-size: 30rpx;
		text-align: center;
		padding: 25rpx 0;
		color: #212121;
		background-color: white;
		border-bottom: 1px solid #ddd;
		font-weight: 700;
	}
	
	.store-detail {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 30rpx;
		
		.store-left {
			flex: 1;
			padding: 20rpx 0 20rpx 70rpx;
			background: url('../../static/img/o2o/dizhi@2x.png') no-repeat 30rpx center;
			background-size: 24rpx 30rpx;
			border-right: 1px solid #ddd;
			padding-right: 30rpx;
			
			.store-name {
				font-size: 30rpx;
				color: #212121;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.store-address {
				font-size: 26rpx;
				color: #6e6e6e;
				padding-top: 5rpx;
				display: block;
			}
		}
		
		.store-right {
			width: 120rpx;
			text-align: center;
			padding-top: 60rpx;
			
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}

.group-info {
	background-color: white;
	
	.hea {
		width: 100%;
		font-size: 30rpx;
		text-align: center;
		padding: 25rpx 0;
		color: #212121;
		background-color: white;
		border-bottom: 1px solid #ddd;
		font-weight: 700;
	}
	
	.group-content {
		padding: 15rpx 30rpx;
		font-size: 24rpx;
		color: #6e6e6e;
		margin-bottom: 15rpx;
	}
	
	.tuwen {
		overflow: hidden;
		padding: 25rpx 30rpx;
		font-size: 30rpx;
		border-top: 1px solid #ddd;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		text {
			color: #FF9600;
		}
		
		image {
			width: 18rpx;
			height: 18rpx;
		}
	}
}

.buy-info {
	background-color: white;
	
	.hea {
		width: 100%;
		font-size: 30rpx;
		text-align: center;
		padding: 25rpx 0;
		color: #212121;
		background-color: white;
		border-bottom: 1px solid #ddd;
		font-weight: 700;
	}
	
	.buy-entry {
		padding: 20rpx 30rpx;
		
		.notice-item {
			margin-bottom: 20rpx;
			
			.notice-title {
				font-size: 28rpx;
				color: #444444;
				font-weight: 700;
				display: block;
				margin-bottom: 10rpx;
			}
			
			.notice-content {
				font-size: 26rpx;
				color: #888888;
				line-height: 45rpx;
				display: block;
			}
		}
	}
}

.comment-section {
	background: none;
	margin: 50rpx 0;
	
	.topa {
		width: 100%;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		border-radius: 10rpx;
		background-color: #FF1E00;
		color: white;
		font-size: 36rpx;
	}
}

// 弹窗样式
.barcode-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .4);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.barcode-card {
		width: 550rpx;
		height: 370rpx;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.barcode-canvas {
			width: 520rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		.barcode-status {
			text-align: center;
			color: #ff1e00;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}
		
		.barcode-code {
			text-align: center;
			font-size: 28rpx;
		}
	}
}

.pay-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .4);
	z-index: 999;
	display: flex;
	align-items: flex-end;
	
	.pay-content {
		width: 100%;
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		
		.pay-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			
			.close-btn {
				font-size: 40rpx;
				color: #999;
			}
		}
		
		.pay-amount {
			text-align: center;
			font-size: 48rpx;
			color: #ff1e00;
			margin-bottom: 40rpx;
		}
		
		.pay-methods {
			.pay-method {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1px solid #eee;
				font-size: 34rpx;
				
				&:last-child {
					border-bottom: none;
				}
				
				.balance-amount {
					color: #ff1e00;
				}
				
				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
}

.password-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index: 1000;
	
	.password-header {
		background-color: #FF1E00;
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: white;
		font-size: 36rpx;
		
		.back {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}
	
	.password-content {
		padding: 60rpx 30rpx;
		
		.password-tip {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 40rpx;
		}
		
		.password-input {
			width: 100%;
			height: 80rpx;
			border: 1px solid #ddd;
			border-radius: 10rpx;
			padding: 0 20rpx;
			font-size: 32rpx;
		}
	}
}

.phone-modal {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 100000;
	display: flex;
	align-items: flex-end;
	
	.phone-content {
		background-color: #f7f7f7;
		width: 100%;
		
		.phone-list {
			.phone-item {
				text-align: center;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #ddd;
				font-size: 32rpx;
				color: #ff1e00;
				background-color: #fff;
			}
		}
		
		.phone-cancel {
			width: 100%;
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			border-top: 1px solid #ddd;
			margin-top: 16rpx;
			color: #6e6e6e;
			font-size: 32rpx;
			background-color: #fff;
		}
	}
}

// 通用样式
.fl {
	float: left;
}

.fr {
	float: right;
}

.clear::after {
	content: "";
	display: table;
	clear: both;
}

.displayflexa {
	display: flex;
	align-items: center;
}

.tf {
	display: block;
	margin: 0 auto;
}
</style>